<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld @my-event="enClick()" msg="Welcome to Your Vue.js App" />
    <ul>
      <li>{{msg}}</li>
      <li>{{msg}}</li>
      <li>{{msg}}</li>
      <li>{{msg}}</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div id="test">我是test</div>
    <teleport to='body'>
      <div>我是home在组件下面的额</div>
    </teleport>

    <teleport to='#test' >
      <div>我是测试使用的案例</div>

    </teleport>
  </div>
</template>
<script setup>
// 变量
const msg = 'HelloWorld'
</script>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  props: {
    title: {
      type: String,
      default: 'niuNiu'
    }
  },
  setup(props, context) {   // 不可以在setup中使用this,
    console.log(props.title);
    console.log(context.attrs); // Attribute （非响应式对象,等同于$attrs）
    console.log(context.slots); // 插槽 (非响应式对象，等同于$slots)
    console.log(context.emit, "触发事件的内容"); // 触发事件,等同于$emit
    console.log(context.expose); // 暴露公共的property（函数）
    // 调用组件中自定义的方法
    context.emit('submit', '吴旭'); // 可以通过context.emit 触发emits中的函数方法
    context.emit('myEvent ')
    return {

    }
  },
  // emits: ["myEvent"], // emits用来存放可以触发的事件  如果需要触发自定义的事件,需要先在emits里写入(必须写,否则容易与原生的方法有冲突)

  emits: {
    myEvent() {
      console.log('myEvent')
    },
    // 首先是没有验证函数的
    onClick1: null,
    // submit  带有验证参数的
    submit: payload => {
      console.log(payload)
    }
  },
  // setup函数的context的四个可使用组件对象结构
  // setup(props, { attrs, emit, expose, slots }) {
    // console.log(attrs)
  //   return {

  //   }
  // },
  components: {
    HelloWorld,
  },
};
</script>
